<template>
  <div class="occupy-picture" :style="{ '--size': props.size }">
    <img :src="props.url" alt="" />
    <div class="text">{{ props.text }}</div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  url: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: '您还没有录音哦,现在开始录音吧'
  },
  size: {
    type: String,
    default: '100px'
  }
})
</script>

<style scoped lang="scss">
.occupy-picture {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  img {
    width: var(--size);
    height: var(--size);
    border: 1px solid #000;
  }
  .text {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 600;
    font-size: 14px;
    color: #a0aab9;
    letter-spacing: 2px;
  }
}
</style>
